<template>
    <div class="company-nav-container">
        <div class="company-nav-con">
            <div class="company-home-nav-list">
                <routerLink tag="li" :to="item.links" class="company-home-nav-list-item" :class="{active : activeNum === index}"
                    v-for="(item,index) in navList" :key="index" @click="activeNum = index">{{item.name}}</routerLink>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CompanyNav",
        data(){
            return {
                activeNum:0,
                navList:[
                    {
                        links:'#',
                        name:'网站首页',
                    },
                    {
                        links:'#',
                        name:'公司简介',
                    },
                    {
                        links:'#',
                        name:'供应信息',
                    },
                    {
                        links:'#',
                        name:'求购信息',
                    },
                    {
                        links:'#',
                        name:'联系我们',
                    },
                    {
                        links:'/',
                        name:'会贸网首页',
                    },
                ],
            }
        }
    }
</script>

<style lang="scss">
    .company-nav-container{
        background-color: #237FBA;
        /*height:38px;*/
        .company-nav-con{
            width:1200px;
            margin:0 auto;
            .company-home-nav-list{
                display: flex;
                align-items: center;
                .company-home-nav-list-item{
                    display: block;
                    width:128px;
                    padding:12px 0;
                    font-size:16px;
                    color:#fff;
                    cursor: pointer;
                    &.active {
                        position:relative;
                        &::before{
                            content:'';
                            display: block;
                            position:absolute;
                            width: 0;
                            height: 0;
                            border-left: 5px solid transparent;
                            border-right: 5px solid transparent;
                            border-bottom: 5px solid #00568D;
                            margin-left:-5px;
                            left:50%;
                            bottom:0;
                        }
                        &::after{
                            content:'';
                            display: block;
                            width:100%;
                            position:absolute;
                            bottom:0;
                            border-bottom:2px solid #00568D;
                        }
                    }
                }
            }
        }
    }
</style>